<template>
  <div class="container">
    <div class="left">
      <template v-for="(item, index) in appGroup" :key="index">
        <GroupBox :title="item.title" ref="groupRef"></GroupBox>
      </template>
    </div>
    <draggable
      class="list-group"
      v-model="appList"
      v-bind="data.dragOptions"
      @add="data.add"
      @remove="data.remove"
      @start="data.start"
      @end="data.end"
      @move="data.move"
      item-key="id"
    >
      <template #item="{ element }" class="list-group-item">
        <AppItem
          v-bind="$attrs"
          :web-name="element.webName"
          :web-url="element.webUrl"
          :icon="element.icon"
          @click.right="mouseClick(element, $event)"
        ></AppItem>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import store from '../store'
import GroupBox from './cpns/glassbox/GroupBox.vue'
import { computed, reactive, ref, watch } from 'vue'
import draggable from 'vuedraggable'
import AppItem from './AppItem.vue'
import mitt from 'mitt'

const appGroup = store.appGroup
const appList = store.appList
const data = reactive({
  start() {
    data.drag = true
  },
  end(event) {
    data.drag = false
    store.move(event.oldIndex, event.newIndex)
  },
  add(value) {
    store.addApp(value.item._underlying_vm_, value.newIndex)
    console.log('添加了', value.item._underlying_vm_)
  },
  remove(value) {
    store.removeApp(value.item._underlying_vm_)
    console.log('移除了', value.item._underlying_vm_)
  },
  drag: false,
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})

const changDataList = (target: any) => {
  const curList = data.list.filter((item) => {
    return item.webName !== target.webName
  })
  data.list = curList
}

const curPos = ref({ posX: 0, posY: 0 })
const emit = defineEmits(['editEvent', 'updateList'])
const mouseClick = (webName: any, e: any) => {
  curPos.value = { posX: e.pageX, posY: e.pageY }
  emit('editEvent', curPos.value, webName)
  e.preventDefault()
  e.stopPropagation()
}
defineExpose({ changDataList })
</script>

<style scoped>
.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.left {
  height: 100%;
  border: 1px dashed;
  display: flex;
}
</style>
